<template>
  <div>
    <div class="head">
      <div class="head_pre">
        <a href="#">首页</a>
        <a href="#" @click="goLogin(isLogin)" class="head_login">{{tipLogin}}</a>
        <a href="#" v-if="isLogin" @click="goLoginOut(isLogin)">退出</a>
        <a href="#" @click="goRegist">免费注册</a>
      </div>
      <div class="head_end">
        <a>购物车</a>
        <a>收藏夹</a>
        <a>商品分类</a>
        <a>免费开店</a>
        <a>联系客服</a>
      </div>
    </div>
    <div class="top">
      <img src="@/assets/background/mango_logo.jpg" class="top_logo" />
      <div class="top_search">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search" clearable></el-input>
      </div>
    </div>
    <div class="main_body">
      <div class="side_menu"></div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      isLogin: false,
      tipLogin: '亲，请登录',
      search: ''
    }
  },
  created() {
    this.initHome()
  },
  methods: {
    initHome() {
      const user = JSON.parse(sessionStorage.getItem('user'))
      for (const item in user) {
        if (item === 'username') {
          this.isLogin = true
          this.tipLogin = '欢迎您，' + user[item]
        }
      }
    },
    goLogin(isLogin) {
      if (!isLogin) {
        this.$router.push('/login')
      }
    },
    goLoginOut(isLogin) {
      if (isLogin) {
        sessionStorage.clear()
      }
      this.$router.push('/login')
    },
    goRegist() {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  background-color: #f5f5f5;
  height: 35px;
  margin: auto;
}

a {
  margin: 7px;
  text-decoration-line: none;
  color: #6c6c6c;
}

.head_pre {
  position: absolute;
  top: 1%;
  left: 15%;
  font-size: 12px;
  color: #6c6c6c;

  .head_login {
    color: #f22e00;
  }
}

.head_end {
  position: absolute;
  top: 1%;
  right: 20%;
  font-size: 12px;
  color: #6c6c6c;
}

.top {
  width: 100%;
  height: 150px;
  background-color: #e4e2e2;
}

.top_logo {
  position: absolute;
  width: 250px;
  height: 100px;
  top: 7%;
  left: 12%;
}

.top_search {
  position: absolute;
  width: 450px;
  height: 100px;
  top: 10%;
  left: 35%;
}
</style>
